<template>
  <div class="page-baseinfo">
    <el-form :inline="true" :model="searchForm" ref="roleForm">
      <div class="pc-page-header">
        <el-form-item label="" prop="companyName">
          <el-input v-model="searchForm.companyName" clearable class="pc-input3-col5"
                    placeholder="输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="" prop="storageName">
          <el-input v-model="searchForm.storageName" clearable class="pc-input3-col5"
                    placeholder="输入仓库名称"></el-input>
        </el-form-item>
        <el-form-item label="" class="city-input" prop="addressList">
          <el-cascader
            placeholder="请选择所在城市"
            :options="addressData"
            clearable
            change-on-select
            v-model="searchForm.addressList"
            :props="addressProps"
            popper-class="city-level2"
            @change="cityChange"
            class="pc-input3-col20 ">
          </el-cascader>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('roleForm')">刷新</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid border
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryRoleList" :queryData="searchForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
    <pc-dialog :is-show="isShowEditDialog" title='编辑仓库信息' @on-close="closeEdit">
      <div>
        <edit @save-edit="saveEdit()" :detailData="detailData"></edit>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowDetailDialog" title='仓库详情' @on-close="closeDetail">
      <div>
        <store-detail :storageId="storageId"></store-detail>
      </div>
    </pc-dialog>
  </div>
</template>
<script>
  import Edit from '../edit/index';
  import PcDialog from 'components/dialog';
  import StoreDetail from '@/views/wms/storemanage/storeDetail';
  import PcPagination from 'components/form/pagination';
  import LongContentCol from 'components/wms/comm/LongContentColComponent';
  let that;
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button  type="primary"  plain @click="toDetail(row)" v-permission="['wms:baseinfo:admin:detail']">详情</el-button>
        <el-button  type="danger"  plain @click="toEdit(row)" v-permission="['wms:baseinfo:admin:edit']">编辑</el-button>
      </div>`,
    props: ['row'],
    methods: {
      // egrid 进详情页方法
      toDetail(row) {
        this.$emit('to-detail', row);
      },
      // egrid 进编辑页方法
      toEdit(row) {
        this.$emit('to-edit', row);
      }
    }
  };
  export default{
    components: {
      PcDialog, PcPagination, Edit, StoreDetail, LongContentCol
    },
    created () {
      that = this;
      // 初始化地址信息
      this.initAddressData();
    },
    data () {
      return {
        storageId: null,
        addressData: [],
        addressProps: {
          value: 'id',
          label: 'nodeName',
          children: 'children'
        },
        searchForm: {
          companyName: '',
          storageName: '',
          cityId: ''
        },
        addressList: null,
        isRefresh: false,
        tableData: [],
        columns: [
          {
            label: '公司名称',
            prop: 'companyName'
          },
          {
            label: '仓库名称',
            prop: 'storageName'
          },
          {
            label: '联系电话',
            prop: 'applicantConTel'
          },
          {
            label: '所在城市',
            prop: 'cityName'
          },
          {
            label: '建筑面积（㎡）',
            prop: 'conArea'
          },
          {
            label: '仓储功能',
            prop: 'storageFun'
          },
          {
            label: '参考价格(元/m²•天)',
            prop: 'referencePrice',
            minWidth: 160
          },
          {
            label: '库容(万吨)',
            prop: 'storageCapacity'
          },
          {
            label: '操作',
            minWidth: 160,
            fixed: 'right',
            component: Btn,
            listeners: {
              'to-detail' (row) {
                that.toDetail(row);
              },
              'to-edit' (row) {
                that.toEdit(row);
              }
            },
            propsHandler: function ({row, col, column}) {
              return {row, col, column};
            }
          }
        ],
        columnsProps: {
          height: 40,
          minWidth: 160,
          showOverflowTooltip: true
        },
        columnsSchema: {
          '公司名称': {
            minWidth: 110
          },
          '仓库名称': {
            minWidth: 120
          },
          '参考价格(元/m² • 天)': {
            minWidth: 180
          },
          '库容(万吨)': {
            minWidth: 100
          },
          '操作': {
            minWidth: 160
          }
        },
        isShowEditDialog: false,
        isShowDetailDialog: false,
        detailData: {},
        pageUrl: {
          queryRoleList: '/maliwms/storage/listStorage' // /company/getManageCompanyList
        }
      };
    },
    methods: {
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      queryCallBackFn (res) {
        let handleData = res.result.list;
        if (handleData.length > 0) {
          for (var i = 0; i < handleData.length; i++) {
            if (handleData[i].conArea === null) {
              handleData[i].conArea = '-';
            }
            if (handleData[i].storageCapacity === null) {
              handleData[i].storageCapacity = '-';
            }
            if (handleData[i].storageFun === null) {
              handleData[i].storageFun = '-';
            }
            if (handleData[i].referencePrice === null) {
              handleData[i].referencePrice = '-';
            }
            if (handleData[i].storageName === null) {
              handleData[i].storageName = '-';
            }
            if (handleData[i].companyName === null) {
              handleData[i].companyName = '-';
            }
          }
        }
        this.tableData = handleData;
      },
      cityChange(value) {
        if (value) {
          if (value[1]) {
            this.searchForm.cityId = value[1];
          } else {
            this.searchForm.cityId = value[0];
          }
        }
      },
      // 刷新
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.searchForm.cityId = '';
        this.queryDataFn();
      },
      toDetail(item) {
        this.storageId = item.id;
        this.isShowDetailDialog = true;
      },
      toEdit(item) {
        let id = item.id;
        this.getStorageData(id, 'edit');
      },
      getStorageData(id, type) {
        let that = this;
        that.ajax({
          type: 'GET',
          url: '/maliwms/storage/storageDetail/' + id,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res && res.code === 200) {
              // 执行成功后操作
              that.detailData = res.result;
              if (that.detailData.edificeType === null) {
                that.detailData.edificeType = [];
              }
              if (that.detailData.fileVos === null) {
                that.detailData.fileVos = [];
              }
              if (that.detailData.securityTerm === null) {
                that.detailData.securityTerm = [];
              }
              if (that.detailData.storageFun === null) {
                that.detailData.storageFun = [];
              }
              that.detailData.id = id;
              if (type === 'edit') {
                that.isShowEditDialog = true;
              }
            }
          }
        });
      },
      closeEdit () {
        this.isShowEditDialog = false;
      },
      closeDetail () {
        this.isShowDetailDialog = false;
      },
      saveEdit () {
        this.isShowEditDialog = false;
        this.queryDataFn();
      },
      columnsHandler() {},
      initAddressData() {
        let address = this.$pcLockr.get(this.$pcEnum.ADDRESS.DISTRICT2);
        if (address) {
          this.addressData = address;
          return;
        }
        this.ajax({
          url: '/mdc/address/get4City',
          success: (res) => {
            let data = res.result;
            if (!data) {
              return;
            }
            // 缓存在浏览器中
            let addredd = data;
            var addData = [];
            for (var i = 0; i < addredd.length; i++) {
              var addDataP = {};
              addDataP.children = [];
              if (addredd[i].children) {
                for (var j = 0; j < addredd[i].children.length; j++) {
                  var addDataC = {};
                  addDataC.id = addredd[i].children[j].id;
                  addDataC.nodeCode = addredd[i].children[j].nodeCode;
                  addDataC.nodeName = addredd[i].children[j].nodeName;
                  addDataC.pid = addredd[i].children[j].pid;
                  addDataP.children.push(addDataC);
                }
              }
              addDataP.id = addredd[i].id;
              addDataP.nodeCode = addredd[i].nodeCode;
              addDataP.nodeName = addredd[i].nodeName;
              addDataP.pid = addredd[i].pid;
              addData.push(addDataP);
            }
            this.addressData = addData;
            this.$pcLockr.set(this.$pcEnum.ADDRESS.DISTRICT2, addData);
          }
        });
      }
    }
  };
</script>
<style>
  .page-baseinfo .el-table th.is-leaf {
    background: #f5f5f5 !important;
  }

  /*.page-baseinfo .el-table th.is-leaf .cell {
    font-size: 16px !important;
  }*/

  /*.page-baseinfo .el-table th>.cell{*/
  /*white-space: nowrap;*/
  /*}*/
  .city-input .el-cascader {
    width: 300px;
  }

  .el-popper.city-level2 .el-cascader-menu:nth-child(4) {
    display: none;
  }
</style>
